<template>
  <div>
    <div class="mask" :style="{'z-index': zIndex}"></div>
    <create-view
      :body-style="{ height: '100%' }"
      :width="width"
      @afterEnter="afterEnter"
    >
      <flexbox
        v-loading="loading"
        direction="column"
        align="stretch"
        class="xr-create"
      >
        <flexbox class="xr-create__header">
          <div v-if="!$slots.title" class="title">{{ title }}</div>
          <slot name="title" />
          <i class="el-icon-close close" @click="close" />
        </flexbox>
        <el-divider v-if="isCol"></el-divider>
        <div class="xr-create__body">
          <slot />
        </div>
        <div class="xr-create__footer">
          <el-button v-if="showCancel" @click.native="close">取消</el-button>
          <slot name="footer" />
          <el-button
            v-if="showConfirm"
            type="primary"
            @click.native="debouncedSaveField(false)"
            >{{ confirmButtonText }}</el-button
          >
        </div>
      </flexbox>
    </create-view>
  </div>
</template>

<script>
import CreateView from "@/components/CreateView";
import { debounce } from "throttle-debounce";
import { getMaxIndex } from "@/utils/index";
export default {
  // 创建页面
  name: "XrCreate",
  components: {
    CreateView
  },
  props: {
    title: String,
    loading: Boolean,
    appendToBody: {
      type: Boolean,
      default: true
    },
    showCancel: {
      type: Boolean,
      default: true
    },
    showConfirm: {
      type: Boolean,
      default: true
    },
    confirmButtonText: {
      type: String,
      default: "保存"
    },
    width: {
      type: String,
      default: "722px"
    },
    isCol: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      zIndex: getMaxIndex(),
    };
  },
  computed: {},
  watch: {},
  created() {
    this.debouncedSaveField = debounce(300, this.save);
  },
  mounted() {
    if (this.appendToBody) {
      document.body.appendChild(this.$el);
    }
  },

  destroyed() {
    if (this.appendToBody) {
      if (this.$el && this.$el.parentNode) {
        this.$el.parentNode.removeChild(this.$el);
      }
    }
  },
  methods: {
    afterEnter() {
      this.$emit("afterEnter");
    },

    save() {
      this.$emit("save");
    },

    close() {
      this.$emit("close");
    }
  }
};
</script>

<style lang="scss" scoped>
.xr-create {
  position: relative;
  height: 100%;
  /deep/ .el-divider--horizontal {
    margin-bottom: 16px;
    margin-top: 13px;
    width: calc(100% - 20px);
    margin-left: 10px;
  }
  &__header {
    height: 40px;
    // margin-bottom: 20px;
    padding: 0 15px;
    flex-shrink: 0;
    .title {
      flex: 1;
      font-size: 17px;
      color: #333;
      font-weight: bold;
    }
    .close {
      display: block;
      font-size: 24px;
      color: #909399;
      margin-right: -10px;
      padding: 10px;
      cursor: pointer;
    }
    .close:hover {
      color: $xr-color-primary;
    }
  }

  &__body {
    position: relative;
    overflow-x: hidden;
    overflow-y: auto;
    flex: 1;
  }

  &__footer {
    position: relative;
    text-align: right;
    padding: 5px 20px 0;
  }
}
.mask {
  position: fixed;
  left: 0;
  top: 60px;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.3);
}
</style>
